<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/admin_login.css">

    <script>
        // 生成验证码
        function createCode(codeID) {
            var code = "";
            // 验证码长度
            var codeLength = 4;
            // 验证码dom元素
            var checkCode = $(codeID);
            // 验证码随机数
            var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
                'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
            for (var i = 0; i < codeLength; i++) {
                // 随机数索引
                var index = Math.floor(Math.random() * 36);
                code += random[index];
            }
            // 将生成的随机验证码赋值
            checkCode.val(code);
        }

        // 校验验证码、用户名、密码
        function validateCode(inputID, codeID) {
            var inputCode = $(inputID).val().toUpperCase();
            var cardCode = $(codeID).val();
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            if ($.trim(loginUsername) == '' || $.trim(loginUsername).length <= 0) {
                layer.alert("用户名不能为空");
                return false;
            }
            if ($.trim(loginPassword) == '' || $.trim(loginPassword).length <= 0) {
                layer.alert("密码不能为空");
                return false;
            }
            if (inputCode.length <= 0) {
                layer.alert("验证码不能为空");
                return false;
            }
            if (inputCode != cardCode) {
                layer.alert("请输入正确验证码");
                return false;
            }
            return true;
        }

        // 登录流程
        function login() {
            if (!validateCode('#loginCard', '#loginCode')) {
                //阻断提示
            } else {
                var loginLoadIndex = layer.load(1);
                $('#loginBtn').val("正在登录...");
                $(function () {
                    var admin = {
                        "adminName": $('#loginUsername').val(),
                        "adminPwd": $('#loginPassword').val(),
                    };
                    $.ajax({
                        type: 'post',
                        url: 'admin/admin_login',
                        dataType: 'JSON',
                        data: JSON.stringify(admin),    // 对象转string
                        contentType: 'application/json;charset=UTF-8',
                        success: function (data) {
                            layer.close(loginLoadIndex);
                            // 经过了fastjson自动转成了对象
                            if (data.code === 0) {
                                window.location.href = 'admin_index.html';
                            } else {
                                console.log()
                                layer.close(loginLoadIndex);
                                $('#loginBtn').val("登录");
                                layer.alert("用户名或密码错误！");
                            }
                        },
                        error: function () {
                            layer.close(loginLoadIndex);
                            $('#loginBtn').val("登录");
                            layer.alert("登录失败！");
                        }
                    })
                })
            }
        }

        // 注册流程
        function register() {
            layer.open({
                type: '1',
                content: $('.registerPage'),
                title: '注册',
                area: ['430px', '400px'],
                btn: ['注册', '重置', '取消'],
                closeBtn: '1',
                btn1: function (index, layero) {
                    //注册回调
                    layer.close(index);
                    var registerUsername = $('#registerUsername').val();
                    var registerPassword = $('#registerPassword').val();
                    var registerWellPassword = $('#registerWellPassword').val();
                    var selectValue = $('#roleSelect option:selected').val();
                    var params = {};
                    params.registerUsername = registerUsername;
                    params.registerPassword = registerPassword;
                    params.registerWellPassword = registerWellPassword;
                    params.selectValue = selectValue;
                    var registerLoadIndex = layer.load(2);
                    $.ajax({
                        type: 'post',
                        url: window.location.protocol + '//' + window.location.host + '/security-web/register.do',
                        dataType: 'json',
                        data: JSON.stringify(params),
                        contentType: 'application/json',
                        success: function (data) {
                            layer.close(registerLoadIndex);
                            layer.msg(data);
                        },
                        error: function () {
                            layer.close(registerLoadIndex);
                            layer.alert("请求超时！")
                        }
                    });
                },
                btn2: function (index, layero) {
                    //重置回调
                    var registerUsername = $('#registerUsername').val("");
                    var registerPassword = $('#registerPassword').val("");
                    var registerWellPassword = $('#registerWellPassword').val("");
                    // 防止注册页面关闭
                    return false;
                },
                btn3: function (index, layero) {
                    //取消回调
                }
            })
        }
    </script>

    <script src="layui/layui.js" type="text/javascript"></script>
    <script>
        layui.use(['layer'], function () {
            var layer = layui.layer;
        })
        $(function () {
            // 页面初始化生成验证码
            window.onload = createCode('#loginCode');
            // 验证码切换
            $('#loginCode').click(function () {
                createCode('#loginCode');
            });
            // 登陆事件
            $('#loginBtn').click(function () {
                login();
            });
            // 注册事件
            $('#loginRegister').click(function () {
                register();
            });
        });

    </script>
</head>

<body>
<div class="wrap">
    <img src="images/admin_login_background.jpg" class="imgStyle">
    <div class="loginForm">
        <form>
            <div class="logoHead">
                <h2 style="margin-top: 15px">高铁售票后台管理系统</h2>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="username"
                           placeholder="输入用户名">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="password"
                           placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" type="text" name="card"
                           placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput" type="button">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="submitLabel">
                    <label>忘记密码？<a href="#" id="loginRegister">找回密码</a></label>
                </div>
                <div class="submitDiv">
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"/>
                </div>
            </div>
        </form>
    </div>
</div>

</body>
<div class="registerPage">
    <div class="registerDiv">
        <form>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="registerUsername" class="layui-input adminInput" type="text" name="username"
                           placeholder="输入用户名">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerPassword" class="layui-input adminInput" type="password" name="password"
                           placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>确认密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerWellPassword" class="layui-input adminInput" type="password" name="password"
                           placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>角色类型:</label>
                </div>
                <div class="passwordDiv">
                    <select id="roleSelect" class="layui-select">
                        <option value="">请选择...</option>
                        <option value="0">经纪人</option>
                        <option value="1">房东</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>
</html>

